<template>
  <div class="Real-time_content">
    <div class="Real-time_title">
      <div class="time_title_left">
        <el-select
          v-model="formInline.line"
          style="width: 140px; height: 40px"
          placeholder="线体选项"
        >
          <el-option
            v-for="item in lineList"
            :key="item"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
        <el-button
          type="primary"
          size="mini"
          style="height: 40px"
          @click="getlistclick"
          >更新</el-button
        >

        <el-input
          style="width: 150px; margin-left: 20px"
          v-model="lower"
          placeholder="请输入产能目标"
          @keyup.enter.native="keydowond"
        ></el-input>
      </div>
      
      <div class="time_title_right">
        <div></div>
        <div style="margin-left:150px"><Fullction></Fullction></div>
        <div class="el-icon-s-home conthome"></div>
      </div>
    </div>

    <div class="real_time_hader">
      <div class="time_hader_title">
        <div class="real_time_svg">
          <svg
            width="100%"
            height="75"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            preserveAspectRatio="xMinYMin meet"
          >
            <g stroke="block" stroke-width="1" fill="none" fill-rule="evenodd">
              <g
                id="Group-6"
                class="goin_oi"
                transform="translate(398.000000, -23.000000)"
              >
                <text class="svg_text" :x="this.x" :y="this.y">
                  设备效能看板
                </text>
                <image
                  id="未标题-4"
                  x="28"
                  y="9"
                  width="568"
                  height="131"
                  xlink:href=""
                ></image>
                <polygon
                  id="Stroke-1"
                  stroke="#5BD1FB"
                  stroke-width="2"
                  opacity="0.4"
                  points="0 0 100 98 665 98 765 0"
                ></polygon>
                <polyline
                  id="Path-4"
                  stroke="#5BD1FB"
                  stroke-width="4"
                  stroke-linecap="round"
                  points="83 81 101.24847 98.167538 121.346043 98.167538"
                ></polyline>
                <polyline
                  id="Path-4-Copy"
                  stroke="#5BD1FB"
                  stroke-width="4"
                  stroke-linecap="round"
                  transform="translate(663.173022, 89.583769) scale(-1, 1) translate(-663.173022, -89.583769) "
                  points="644 81 662.24847 98.167538 682.346043 98.167538"
                ></polyline>
              </g>
              <g
                xmlns="http://www.w3.org/2000/svg"
                stroke="#5BD1FB"
                stroke-width="2"
                opacity="0.4"
                fill="none"
              >
                <!-- <path d="" /> -->
                <!-- <path class="path1" d="M0.5 0.5L39.5 39.5 L607.5 39.5 L568.5 0.5Z" /> -->
                <!-- <path d="M1352.5 0.5L1313.5 39.5L1881.5 39.5L1919.5 0.5Z" /> -->
              </g>
            </g>
          </svg>
        </div>

        <div class="echatrs_box">
          <div id="my_newest"></div>
          <div id="my_newest_2"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import Icon from 'vue-svg-icon/Icon.vue'
// import bgimg from '../../../utxs/utxs'
import Fullction from "../../../components/fullscreen/Fullscreen";
import bgimg from "@/assets/svg/dowhader.svg";
import bgimg_top from "@/assets/svg/dow_top.svg";
export default {
  components: { Fullction },
  data() {
    return {
      lower: "",
      titleL: "",
      lineList: [],
      RecipeList: [],
      defectlist: [],
      formInline: {
        line: "",
        site: "",
      },
      x: 290,
      y: 65,
      img: bgimg,
      img_top: bgimg_top,
      data: [],
      value: Math.random() * 1000,
      now: +new Date(1997, 9, 3),
      oneDay: 24 * 3600 * 1000,
      OutPuttime1: null,
      Activationtime2: null,
      Efficienttime: null,
      NGNumtime: null,
      OutPut: [],
      Activation: [],
      Efficient: [],
      NGNum: [],
      OutPut_2: [],
      Activation_2: [],
      Efficient_2: [],
      NGNum_2: [],
      list: [],
      timr: [],
      abiitems: [],
      afiitems: [],
      abiitems1: [],
      afiitems1: [],
    };
  },
  mounted() {
    // this.getrecipelist();
    this.realclick();
    // console.log(window.innerWidth);
  },
  methods: {
    randomData(now, value) {
      now = new Date(+this.now + this.oneDay);

      value = this.value + Math.random() * 21 - 10;

      return {
        name: now.toString(),
        value: [
          [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/"),
          Math.round(value),
        ],
      };
    },

    ///产量线
    keydowond() {
      // console.log(this.lower);
      var char_1 = this.$echarts.init(document.getElementById("my_newest"));
      var char_2 = this.$echarts.init(document.getElementById("my_newest_2"));
      char_2.dispose();
      char_1.dispose();
      this.my_newest();
      this.my_newest_2();
    },

    //获取 线体
    realclick() {
      this.ajax
        .get(
          `prod/1011?line=${this.formInline.line}$site=${this.formInline.site}`
        )
        .then((res) => {
          // console.log(res.data);
          this.lineList = res.data.line;
          this.RecipeList = res.data.site;
        });
    },


    ///点击查询数据
    getlistclick() {
      this.ajax
        .get(
          `prod/1019?line=${this.formInline.line}&site=${this.formInline.site}`
        )
        .then((res) => {
          console.log(res.data)
          this.abiitems = res.data.ABI;
          this.afiitems = res.data.AFI;
          if (this.abiitems) {
            this.my_newest();
          }
          if(this.afiitems){
            this.my_newest_2();
          }
          // this.lineList = res.data.line;
          // this.RecipeList = res.data.site;
        });
      var char_1 = this.$echarts.init(document.getElementById("my_newest"));
      var char_2 = this.$echarts.init(document.getElementById("my_newest_2"));
      char_1.dispose();
      char_2.dispose();
    },

    //实时折线图1
    my_newest() {
        let my_newest = this.$echarts.init(document.getElementById("my_newest"));
        let list = [];
        let keylist = [];
        let linelist = [];
        var lowerlist = [];
        var lower = this.lower;
        for (let i = 0; i < this.abiitems.length; i++) {
          keylist.push(this.abiitems[i].key);
          list.push(this.abiitems[i].val.total);
          linelist.push(Math.round(this.abiitems[i].val.ok * 100) / 100);
        }
        var ony = linelist.map(Number);

        for (let i = 1; i < 20; i++) {
          lowerlist.push(this.lower);
        }

      var option = {
        title: {
          text: "ABI实时看板统计",
          x: "center",
          y: "7px",
          textStyle: {
            fontSize: 15,
            color: "#ffffff",
          },
        },
        tooltip: {
          trigger: "axis",
          formatter: "{b0}<br /> {a0}:{c0}<br />{a1}: {c1}%",
        },
        color:['#0066CC','#fffffff'],
        legend: {
          data: ["产能", "良率"],
          right: "10%",
          textStyle: {
          color: "#fffffff",
          },
        },
        grid: {
          left: "1%",
          right: "1%",
          bottom: "1%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
           axisTick: {
                alignWithLabel: false
            },
          axisLabel:{
             interval:0
          },
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
          boundaryGap: true,
          data: keylist,
          nameTextStyle: {
            fontSize: 8,
          },
        },
        yAxis: [
          {
          type: "value",
          splitLine:{show:false},
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
          axisLabel: {
            show: true,
            formatter: "{value}",
            interval: "auto",
          },
        },
         {
           type:"value",
           max:100,
           min:0,
            axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
          axisLabel: {
               formatter:'{value}%',
              },
         }
        ],
        series: [
          {
            name: "产能",
            type: "bar",
            // stack: "总量",
            data: list,
            barGap:'10%',
            barWidth: "20%",
            // symbolSize: 12,
            lineStyle: {
              width: 40,
            },
            itemStyle: {
              color: "#0066CC",
              normal:{
                color:function(params){
                  if(params.value<lower){
                     return '#FF6666'
                  }else{
                     return  '#0066CC'
                  }
                }
              }
            },
            label: {
              show: true,
              position: "top", //在上方显示
              color: "#ffffff",
            },
          },
          {
            name: "良率",
            type: "line",
            yAxisIndex:1,
            lineStyle: {
              normal: {
                type: "solid",
                color: "#ffffff",
                fontSize:10
              },
            },
            label: {
              show: true,
              color: "#ffffff",
              formatter:'{c}'
            },
            smooth: false,
            markPoint: {
              symbolOffset: ["70%", "90%"],
            },
            data:ony,
          },
          {
            name: "",
            type: "line",
            data: lowerlist,
            markLine: {
              symbol: "none",
              label: {
                show: true,
                position: "middle", //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
                // formatter: `${lower}`,
              },
              data: [
                {
                  silent: false, //鼠标悬停事件  true没有，false有
                  lineStyle: {
                    //警戒线的样式  ，虚实  颜色
                    type: "solid",
                    color: "red",
                  },
                  yAxis: this.lower, //警戒线在y轴的坐标
                },
              ],
            },
          },
        ],
      };

      my_newest.setOption(option, true);
      window.addEventListener("resize", function () {
        my_newest.resize();
      });
      this.OutPuttime1 = setInterval(() => {
        this.setintovgetlist();
        let list = [];
        let keylist = [];
        let linelist = [];
        setTimeout(() => {
          // console.log("=============产能第二次回去数据", this.abiitems1);
          for (let i = 0; i < this.abiitems1.length; i++) {
            keylist.push(this.abiitems1[i].key);
            list.push(this.abiitems1[i].val.total);
            linelist.push(Math.round(this.abiitems[i].val.ok * 100) / 100);
          }
          var ony = linelist.map(Number);
          my_newest.setOption({
            xAxis: {
              type: "category",
              axisLine: {
                lineStyle: {
                  color: "#fff",
                },
              },
              // boundaryGap: false,
              data: keylist,
              nameTextStyle: {
                fontSize: 8,
              },
            },
            series: [
              {
                name: "产能",
                type: "bar",
                // stack: "总量",
                data: list,
                symbolSize: 12,
                barWidth: "30%",
                lineStyle: {
                  width: 4,
                },
                itemStyle: {
                  // color: "#FFA500",
                   normal:{
                    color:function(params){
                      if(params.value<lower){
                        return '#FF6666'
                      }else{
                        return  '#0066CC'
                      }
                    }
                 }
                },
                label: {
                  show: true,
                },
              },
              {
                name: "良率",
                type: "line",
                yAxisIndex:1,
                lineStyle: {
                  normal: {
                    type: "solid",
                    color: "#ffffff",
                    fontSize:10,
                    formatter:'{c}%'
                  },
                },
                smooth: false,
                markPoint: {
                  symbolOffset: ["70%", "90%"],
                },
                data: ony,
              },
            ],
          });
        }, 2500);
      }, 300000);
          my_newest.setOption(option, true);
          return
    },

    //实时折线图2
    my_newest_2() {
      let my_newest_2 = this.$echarts.init(
        document.getElementById("my_newest_2")
      );
      let list = [];
      let keylist = [];
      let linelist = [];
      let lowerlist = [];
      let lower = this.lower;
      for (let i = 0; i < this.afiitems.length; i++) {
        keylist.push(this.afiitems[i].key);
        list.push(this.afiitems[i].val.total);
        linelist.push(Math.round(this.afiitems[i].val.ok * 100) / 100);
      }
      var ony = linelist.map(Number);

      for (let i = 1; i < 20; i++) {
        lowerlist.push(this.lower);
      }

      var option = {
        title: {
          text: "AFI实时看板统计",
          x: "center",
          y: "7px",
          textStyle: {
            fontSize: 15,
            color: "#ffffff",
          },
        },
        tooltip: {
          trigger: "axis",
          formatter: "{b0}<br /> {a0}:{c0}<br />{a1}: {c1}%",
        },
         color:['#0066CC','#fffffff'],
        legend: {
          data: [ "产能","良率"],
          right: "10%",
          textStyle: {
            color: "#fffffff",
          },
        },
        grid: {
          left: "1%",
          right: "1%",
          bottom: "1%",
          containLabel: true,
           borderWidth:0
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          splitLine:{show:false},
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
          // boundaryGap: true,
          data: keylist,
        },
        yAxis:[
          {
          type: "value",
           splitLine:{show:false},
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
          axisLabel: {
            show: true,
            formatter: "{value}",
            interval: "auto",
          },
        },
         {
           type:"value",
           max:100,
           min:0,
            axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
          axisLabel: {
               formatter:'{value}%',
              },
         }
        ],
        series: [
          {
            name: "产能",
            type: "bar",
            // stack: "总量",
            data: list,
            barWidth: "30%",
            symbolSize: 12,
            lineStyle: {
              width: 4,
            },
            itemStyle: {
              // color: "#FFA500",
               normal:{
                color:function(params){
                  if(params.value<lower){
                    return '#FF6666'
                  }else{
                    return  '#0066CC'
                  }
                }
              }
            },
            label: {
              show: true,
              position: "top",
              color: "#ffff",
            },
          },
          {
            name: "良率",
            type: "line",
            yAxisIndex:1,
            lineStyle: {
              normal: {
                type: "solid",
                fontSize:10,
                color: "#ffffffff",
              },
            },
            label: {
              show: true,
              color: "#fffffff",
              formatter:'{c}'
            },
            smooth: false,
            markPoint: {
              symbolOffset: ["70%", "90%"],
            },
            data: ony,
          },
          {
            name: "",
            type: "line",
            data: lowerlist,
            markLine: {
              symbol: "none",
              label: {
                show: true,
                position: "middle", //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
                // formatter: `${lower}`,
              },
              data: [
                {
                  silent: false, //鼠标悬停事件  true没有，false有
                  lineStyle: {
                    //警戒线的样式  ，虚实  颜色
                    type: "solid",
                    color: "red",
                  },
                  yAxis: this.lower, //警戒线在y轴的坐标
                },
              ],
            },
          },
        ],
      };
      my_newest_2.setOption(option, true);

      window.addEventListener("resize", function () {
        my_newest_2.resize();
      });
      this.Activationtime2 = setInterval(() => {
        let list = [];
        let keylist = [];
        let linelist = [];
        setTimeout(() => {
          // console.log("第二次获取数据", this.afiitems1);
          for (let i = 0; i < this.afiitems1.length; i++) {
            keylist.push(this.afiitems1[i].key);
            list.push(this.afiitems1[i].val.total);
            linelist.push(Math.round(this.afiitems[i].val.ok * 100) / 100);
          }       
          var ony = linelist.map(Number);
          my_newest_2.setOption({
            xAxis: {
              type: "category",
              axisLine: {
                lineStyle: {
                  color: "#fff",
                },
              },
              // boundaryGap: false,
              data: keylist,
              nameTextStyle: {
                fontSize: 8,
              },
            },
            series: [
              {
                name: "产能",
                type: "bar",
                // stack: "总量",
                barWidth: "30%",
                data: list,
                symbolSize: 12,
                lineStyle: {
                  width: 4,
                },
                itemStyle: {
                  // color: "#FFA500",
                   normal:{
                      color:function(params){
                        if(params.value<lower){
                          return '#FF6666'
                        }else{
                          return  '#0066CC'
                        }
                      }
              }
                },
                label: {
                  show: true,
                  position: "top",
                  color: "#ffffff",
                },
              },
              {
                name: "良率",
                type: "line",
                yAxisIndex:1,
                lineStyle: {
                  normal: {
                    type: "solid",
                    color: "#000",
                    fontSize:10,
                    formatter:'{c}%'
                  },
                },
                label: {
                  show: true,
                  color: "#fffffff",
                },
                smooth: false,
                markPoint: {
                  symbolOffset: ["70%", "90%"],
                },
                data: ony,
              },
            ],
          });
        }, 2500);
        console.log("更新数据完成");
      },300000);
          my_newest_2.setOption(option, true);
       
    },


    getrecipelist() {
      let a = {};
      this.ajax({
        url: "airplane",
        method: "GET",
        params: {
          data: a,
        },
      }).then((res) => {
        if (res.data.code == 200) {
          // console.log(res.data);
          this.lineList = res.data.data.line;
          this.RecipeList = res.data.data.recipe;
          this.defectlist = res.data.data.defect;
          if (this.RecipeList) {
            this.$message({
              message: "请选择机种，线体",
              type: "success",
            });
            // this.nowEcharts()
          } else {
            this.$message({
              message: "数据未能返回，请刷新浏览器",
              type: "warning",
            });
          }
        }
      });
    },

    //定时器内获取数据
    setintovgetlist() {
      this.ajax
        .get(
          `prod/1019?line=${this.formInline.line}&site=${this.formInline.site}`
        )
        .then((res) => {
          console.log(res.data);
          this.abiitems1 = res.data.ABI;
          this.afiitems1 = res.data.AFI;
        });
    },
  },

  beforeDestroy() {
    clearInterval(this.OutPuttime1);
    clearInterval(this.Activationtime2);
  },
};
</script>

<style  scoped>
.Real-time_content {
  width: 100%;
  height: 100%;
  background: #ffffff;
  /* border: 1px solid red; */

  /* background:rgba(35, 4, 59, 0.952); */
}
.Real-time_top {
  width: 90%;
  margin: 0 auto;
  display: flex;
  margin-bottom: 10px;
}
.time_title {
  width: 20%;
  margin-top: 7px;
  margin-left: 220px;
}
.real_time_hader {
  min-height:80vh;
  max-height:110vh;
  width: 100%;
  margin: 15px auto;
  /* height:500px; */
  display: flex;
  flex-flow: wrap;
  /* border: 1px solid blue; */
  justify-content: space-between;
  background: #09163d;
}
#my_newest {
  width:48%;
  height: 71vh;
  box-shadow: 0px 0px 0px 2px gainsboro;
  /* background: #ecebeb; */
  margin: 10px auto;
  margin-bottom: 30px;
}
 #my_newest_2 {
  width: 48%;
  height: 71vh;
  box-shadow: 0px 0px 0px 2px gainsboro;
  /* background: #ecebeb;  */
   margin: 10px auto;
  margin-bottom: 30px;
} 

.echatrs_box {
  width: 100%;
  /* border: 1px solid red; */
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

.Real-time_title {
  width: 100%;
  /* border: 1px solid #000; */
  box-shadow: 0px 0px 0px 0.5px gainsboro;
  background: #ffffff;
  display: flex;
  justify-content: space-between;
}

.time_title_right {
  width: 20%;
  display: flex;
  justify-content: space-between;
}
.time_title_left {
  width: 60%;
  /* border: 1px solid #000; */
  display: flex;
  /* justify-content: space-between; */
  align-items: center;
}
.conthome {
  font-size: 40px;
}
.time_hader_title {
  width: 100%;
  /* border: 1px solid yellow; */
}
svg {
  position: relative;
}
.real_time_svg {
  width: 100%;
}
.svg_text {
  fill: #ffffff;
  font-size: 24px;
}

@media screen and (min-width: 1920px) {
  #Group-6 {
    transform: translate(577px, -23px);
  }
  .real_time_hader {
    width: 100%;
    margin: 30px auto;
    /* height:500px; */
    display: flex;
    flex-flow: wrap;
    /* border: 1px solid blue; */
    justify-content: space-between;
    background: #09163d;
  }

  #my_newest {
    width: 48%;
    height: 70vh;
    box-shadow: 0px 0px 0px 2px gainsboro;
    /* background: #ecebeb; */
    margin: 10px auto;
    margin-bottom: 50px;
  }
  #my_newest_2 {
    width: 48%;
    height: 70vh;
    box-shadow: 0px 0px 0px 2px gainsboro;
    /* background: #ecebeb; */
    margin: 10px auto;
    margin-bottom: 50px;
  }
}
</style>